<script setup lang="ts">
import { PageProps } from '@/hooks/usePage'
import { messagePageAPI, messageReadBatchAPI } from '@/api/message'

const MeScrollPageREF = ref()
const page = reactive<PageProps>({
    params: {
        bizTab: 2 // 业务tab：1.系统通知 2.服务通知 3.评论 4.新粉丝 5.赞/收藏
    },
    fetchData: undefined
})

const navTitle = ref('服务通知')

onLoad((op) => {
    console.log(op)

    if (op!.type === 'system') {
        navTitle.value = '系统通知'
        page.params.bizTab = 1
    } else {
        navTitle.value = '服务通知'
        page.params.bizTab = 2
    }
    page.fetchData = messagePageAPI

    MeScrollPageREF.value.resetData()
})

// 批量已读 系统通知  服务通知
//批量已读评论
const batchRead = () => {
    messageReadBatchAPI({
        type: [page.params.bizTab === 1 ? 2 : 3],
        ids: (page.data as any[]).map((item: any) => item.id)
    })
}
</script>

<template>
    <view class="page">
        <wxTopStatus backgroundColor="#fff">
            <view class="nav-title"> {{ navTitle }} </view>
        </wxTopStatus>
        <MeScrollPage
            type="body"
            :config="{}"
            ref="MeScrollPageREF"
            :page="page"
            @onGetListLafer="batchRead"
        >
            <view class="list p-[30rpx] gap-[30rpx] flex-column">
                <view class="item-card p-[20rpx]" v-for="item in page.data" :key="item.id">
                    <view class="card-header">
                        <view class="title">{{ item.title }}</view>
                        <view class="time">{{ item.createTime }}</view>
                    </view>
                    <view class="body">
                        {{ item.content }}
                    </view>
                    <view class="footer">
                        <view>查看详情</view>
                    </view>
                </view>
            </view>
        </MeScrollPage>
    </view>
</template>

<style scoped lang="scss">
.page {
    min-height: 100vh;
    background-color: #f2f3f7;
}

.item-card {
    border-radius: 20rpx;
    background-color: #fff;
    .card-header {
        .title {
            color: #3d3d3d;
            font-size: 14px;
            font-weight: 700;
        }
        .time {
            padding-top: 10rpx;
            font-size: 12px;
            color: #999999;
        }
    }
    .body {
        color: #666666;
        padding: 30rpx 0;
    }
    .footer {
        display: flex;
        justify-content: flex-end;
        padding: 30rpx 0 10rpx;
        border-top: 1px solid #efefef;
        view {
            color: #376af7;
            font-size: 14px;
        }
    }
}
</style>
